<template>
  <div class="addressList" ref="homePage">
    <div class="bj">
      <van-nav-bar @click-left="clickleft" style="background: #ececec;color: #46d0ca;" title="收货地址" left-text="" left-arrow>
        <div slot="right" style="color: #46d0ca;" class="searcha">
        </div>
      </van-nav-bar>
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <div v-show="datalist.length == 0" class="wudingdan">
      <van-icon name="description" />
      <p>亲,暂无收货地址！</p>
    </div>
    <div v-show="datalist.length != 0" class="content">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="UserAddList">
        <div class="item" v-for="(itme,index) in datalist" :key='index'>
          <p class="info_name">
            <span>{{itme.UName}}</span>
            <span>{{itme.Mobile}}</span>
          </p>
          <p class="idcard">{{itme.Prov}}{{itme.City}}{{itme.Dist}}{{itme.Address}}</p>
          <div class="tips">
            <van-radio-group v-model="radio">
              <van-radio :name="itme.uabSN" @click="BookSetDefault(itme.uabSN)">默认地址</van-radio>
            </van-radio-group>
            <div class="right">
              <div class="right_item" @click="bianjidata(itme.uabSN,itme.UName,itme.Mobile,itme.Prov,itme.City,itme.Dist,itme.Address)">
                <van-icon size="17px" style="margin-right: 0.1875rem;" name="records" />
                <span>编辑</span>
              </div>
              <div class="right_item" @click="Deletedata(itme.uabSN)">
                <van-icon size="17px" style="margin-right: 0.1875rem;" name="delete" />
                <span>删除</span>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div class="bottom" @click="JumpEditLinkMan">
      <div class="bottom_btn">添加收货地址</div>
    </div>
    <div style="width: 100%;height: 100px;"></div>
  </div>
</template>

<script>
import {
  UserAddressBookList,
  UserAddressBookDo
} from '@/api/home.js'
export default {

  data () {
    return {
      clintHeigth: '', //获取页面高度
      radio: '',
      datalist: [],
      loading: false, //控制上拉加载的加载动画
      finished: false, //控制在页面往下移动到底部时是否调用接口获取数据
      totalPage: 0,
      pageNumber: 0, //自定义一个变量
    }
  },

  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
    // console.log(this.clientHeight);
    // let dd = 100;
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    this.UserAddList();

  },
  methods: {
    clickleft () {
      this.$router.back(-1);
      // console.log(1)
    },
    JumpEditLinkMan () { //跳转增加收货地址
      this.$router.push({
        path: "/Me/EditLinkMan",
      })
    },
    UserAddList () { //请求联系人数据
      let data = {
        "PageNo": this.pageNumber + 1,
      }
      UserAddressBookList(data).then(res => {
        // this.datalist = res.List
        this.totalPage = res.PageCount;
        if (res.List.length > 0) {
          this.datalist = this.datalist.concat(res.List);
        } else {
          this.datalist = res.List
        }
        this.datalist.forEach((v, i) => {
          if (v.IsDefault == true) {
            this.radio = v.uabSN
            // console.log(this.radio)
          }
        })
        this.loading = false;
        this.pageNumber++;
        if (this.pageNumber >= this.totalPage) {
          this.finished = true;
        }

      })
    },
    bianjidata (uabSN, name, phone, Prov, City, Dist, Address) { //跳转编辑增加收货地址
      this.$router.push({
        path: "/Me/EditLinkMan",
        query: {
          uabSN: uabSN,
          name: name,
          phone: phone,
          Prov: Prov,
          City: City,
          Dist: Dist,
          Address: Address,
          type: "Edit",
        }
      })
    },
    Deletedata (uabSN) { //删除联系人
      let data = {
        DoType: 'Delete',
        uabSN: uabSN,
      }
      this.$dialog.confirm({
        message: '确定删除',
        confirmButtonColor: '#46d0ca'
      }).then(() => {
        UserAddressBookDo(data).then(res => {
          this.$toast('删除成功');
          this.UserAddList();
          window.location.reload()
        })
      }).catch(() => {
        // on cancel
      });

    },
    BookSetDefault (value) {//点击设置默认地址
      // this.radio= value
      console.log(value)
      let data = {
        DoType: 'SetDefault',
        uabSN: value,
      }
      UserAddressBookDo(data).then(res => {
        console.log(res)
        // this.$toast('删除成功');
        this.datalist = []
        this.pageNumber = 0;
        this.UserAddList();
        this.$forceUpdate();

      })

    },
  }
}
</script>

<style lang="scss">
.addressList {
  .bj {
    .van-icon {
      color: white !important;
    }
  }

  .content {
    .item {
      background: #ffffff;
      font-size: 12px;
      margin-bottom: 0.625rem;

      .info_name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.625rem;
        padding-top: 0.9375rem;
        font-size: 14px;
        line-height: 0.9375rem;
        color: #5c5c5c;
      }

      .idcard {
        color: #5c5c5c;
        padding: 0 0.625rem;
        padding-bottom: 0.625rem;
        line-height: 1rem;
        border-bottom: 0.0625rem solid #d9d9d9;
      }

      .tips {
        height: 2.625rem;
        display: flex;
        justify-content: space-between;
        margin: 0 0.625rem;
        align-items: center;

        span {
          color: #5c5c5c !important;
        }
        .right {
          display: flex;
          align-items: center;

          .right_item {
            display: flex;
            // align-items: center;
            margin-left: 0.1875rem;
          }
        }

        // .van-radio-group .van-icon {
        //   background-color: #46d0ca !important;
        //   border-color: #46d0ca !important;

        // }
        // 这是选中状态还是？ 这个就是选中  好的
        .van-radio-group {
          .van-icon {
            color: white !important;
            font-size: 16px !important;
          }
          .van-radio__icon--checked {
            .van-icon {
              background-color: #46d0ca !important;
              border-color: #46d0ca !important;
            }
          }
        }
      }
    }
  }

  .bottom {
    height: 60px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;

    .bottom_btn {
      width: 90%;
      background: #46d0ca;
      text-align: center;
      height: 40px;
      font-size: 16px;
      line-height: 40px;
      margin: 0.75rem 0.625rem;
      border-radius: 30px;
      color: white;
    }
  }
}
</style>
